import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity, DeviceEventEmitter, TextInput, Modal
} from 'react-native';

//引入

import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";

import Utils from "../../utils/Utils";
const { width, height } = Dimensions.get('window')

export default class TXinfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            toastModelVisible: false,
            message: '',
            info: null,
            bankid: 1,
            banktitle: '',
            bankname: '',
            bankcode: '',
            rmb: '',
            pass: '',
            curBank: null,
            isBank: false,
        };
        this.timeOut = null;
        this.hide = false;

    }
    static navigationOptions = {
        //title: '彩票咨询',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#ff0000',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {

    }
    componentWillUnmount() {
        clearTimeout(this.timeOut);
        this.hide_banklist();
    }
    componentDidMount() {
        this.setState({
            truename: this.props.truename
        });
        this.getServerData(() => { });
    }
    getServerData(callback) {
        let _this = this;
        let params = {};
        params.token = Ugame.info.Token;
        Httpc.get(REQUEST.GetCashInfo, params, function (res) {
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
            }
            if (res.StatusCode == 1) {
                let bankid = res.Data.bankid;
                if (bankid == 0) {
                    bankid = res.Data.banklist[0].id;
                }
                 let banktitle = '';
                res.Data.banklist.map(function (item) {
                    if (item.id == bankid) {
                        banktitle = item.name;
                    }
                });
                let curBank = {
                    bankid: bankid,
                    banktitle: banktitle,
                    bankname: res.Data.bankname
                }
                if (banktitle == "支付宝" || banktitle == '微信') {
                    isBank = false;
                } else {
                    isBank = true;
                }
                _this.setState({
                    info: res.Data,
                    bankid: bankid,
                    curBank: curBank,
                    isBank: isBank,
                    banktitle: banktitle,
                    bankname: res.Data.bankname,
                    bankcode: res.Data.bankcode
                });
                callback();
            }
        })
    }
    do_send = () => {
        if (this.hide) {
            return;
        }
        this.hide = true;
        let { info, bankid, bankcode, rmb, pass,bankname } = this.state;
        if (Number(bankid) == 0) {
            bankid = 1;
        }
        if (bankcode == '') {
            this.do_toast('请输入提现帐号', 500);
            this.hide = false;
            return;
        }
        if (rmb == '' || Number(rmb) == 0 || isNaN(Number(rmb))) {
            this.do_toast('请输入提现金额', 500);
            this.hide = false;
            return;
        }
        if (Number(rmb) > Number(info.Gold)) {
            this.do_toast('超出可提取余额', 500);
            this.hide = false;
            return;

        }
        if (pass == '') {
            this.do_toast('请输入提现密码', 500);
            this.hide = false;
            return;
        }
        let params = {};
        params.token = Ugame.info.Token;
        params.bankid = bankid;
        params.bankcode = bankcode;
        params.rmb = rmb;
        params.pass = pass;
        params.bankname =bankname;
        //console.log(params);
        Httpc.postQueryJsonFromData(REQUEST.SetUserCash, params, function (res) {
            this.hide = false;
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }
            this.do_toast(res.Message, 500);
            if (res.StatusCode != 1) {
                return;
            }
            this.setState({
                rmb: '',
                pass: '',
            }, () => {
                this.getServerData(() => { });
            });
        }.bind(this));
    }
    _on_change_banklist = () => {
        this.setState({
            modalVisible: true
        });
    }
    hide_banklist = () => {
        this.setState({
            modalVisible: false
        });
    }
    submit_banklist = () => {

        this.hide_banklist();

    }
    _on_change_bankid = (item) => {
        let curBank = this.state.curBank;
        if (item.name != curBank.bankname) {
            bankname = '';
        }else{
            bankname = curBank.bankname;
        }
        if (item.name == "支付宝" || item.name == '微信') {
            isBank = false;
        } else {
            isBank = true;
        }
        this.setState({
            bankid: item.id,
            banktitle: item.name,
            bankname:bankname,
            isBank:isBank
        }, () => {
            this.hide_banklist();
        });

    }
    _render_banklist_item = (item, index, separators) => {
        let { bankid } = this.state;
        if (bankid == 0) bankid = 1;
        return (
            <TouchableOpacity onPress={() => { this._on_change_bankid(item) }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 5, paddingBottom: 5, paddingLeft: 14, paddingRight: 14, borderBottomColor: '#f7f7f7', borderBottomWidth: 0.5 }}>
                    <Text style={{ color: '#666666' }}>{item.name}</Text>
                    {item.id == bankid ?
                        <Image resizeMode="cover" source={require('../../image/js_img_icon_jiangjin_checked.png')} /> :
                        <Image resizeMode="cover" source={require('../../image/js_img_icon_jiangjin_unchecked.png')} />
                    }
                </View>
            </TouchableOpacity>

        )
    }
    _show_banklist_model = () => {
        let { info } = this.state;
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this.hide_banklist()
                }}
            >
                <View style={Styles.ball_addr}>
                    <View style={Styles.ball_addr_content}>
                        <View style={Styles.ball_addr_content_list} >
                            <FlatList
                                data={info.banklist}
                                extraData={this.state}
                                keyExtractor={(item, index) => index.toString()}
                                renderItem={({ item, index, separators }) => this._render_banklist_item(item, index, separators)}
                            />
                        </View>
                    </View>
                    <TouchableOpacity onPress={this.hide_banklist} style={{ width: width - 200, height: 30, backgroundColor: '#ffffff', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} >
                        <Text style={{ color: '#333333' }}>取消</Text>
                    </TouchableOpacity >
                </View>
            </Modal>
        );
    }
    do_toast = (str, time) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this.timeOut = setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    _onbbankcodeChangeText = (bankcode) => {
        this.setState({
            bankcode: bankcode
        });
    }
    _onrmbChangeText = (rmb) => {
        if (rmb == '' || Number(rmb) == 0 || isNaN(Number(rmb))) {
            return;
        }
        rmb = Number(rmb);
        rmb = Math.round(rmb * 100) / 100;
        if (rmb > this.state.info.Gold) {
            this.do_toast('超出可提取余额', 500);
        }
        this.setState({
            rmb: rmb + ''
        });
    }
    _onpassChangeText = (pass) => {
        this.setState({
            pass: pass
        });

    }
    render() {
        let { info, truename, bankid, bankname, banktitle, bankcode, rmb, pass, curBank } = this.state;
        if (info == null) {
            return (
                <View></View>
            );
        }
        if (bankid == 0) {
            bankid = info.banklist[0].id;
            bankname = info.banklist[0].name;
        }
        return (
            <View style={Styles.container}>
                <Text style={{ width: width, height: 40, borderBottomColor: '#ededed', borderBottomWidth: 0.5, textAlign: 'center', color: '#666666', lineHeight: 40, backgroundColor: '#ffffff' }}>
                    可提取余额<Text style={{ color: '#d0162e' }}>{info.Gold}</Text>元
                </Text>

                <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                    <View style={Styles.item}>
                        <Text style={{ color: '#666666' }}>开户姓名：</Text>
                        <Text style={{ color: '#969696', fontSize: 12 }}>{truename}</Text>
                    </View>
                    <TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: 40, borderBottomColor: '#ededed', borderBottomWidth: 0.5, paddingLeft: 12, paddingRight: 12 }} onPress={this._on_change_banklist}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                            <Text style={{ color: '#666666' }}>提现银行：</Text>
                            <Text style={{ color: '#969696', fontSize: 12 }}>{banktitle}</Text>
                        </View>
                        <Image resizeMode="cover" source={require('../../image/js_img_btn_pulldown.png')} />
                    </TouchableOpacity>
                    {isBank ?
                        <View style={Styles.item}>
                            <Text style={{ color: '#666666' }}>开户行：</Text>
                            <TextInput
                                style={{ fontSize: 12, height: 25, padding: 0, lineHeight: 25, color: '#666666', textAlign: 'left', width: width - 100, color: '#666666' }}
                                value={bankname}
                                placeholder={"请输入开户行"}
                                clearButtonMode="always"
                                onChangeText={(bankname) => this.setState({ bankname })}
                            />
                        </View> : null
                    }
                    <View style={Styles.item}>
                        <Text style={{ color: '#666666' }}>提现帐号：</Text>
                        <TextInput
                            style={{ fontSize: 12, height: 25, padding: 0, lineHeight: 25, color: '#666666', textAlign: 'left', width: width - 100, color: '#666666' }}
                            value={bankcode}
                            placeholder={"请输入提现帐号"}
                            clearButtonMode="always"
                            onChangeText={(bankcode) => this._onbbankcodeChangeText(bankcode)}
                        />
                    </View>
                    <View style={Styles.item}>
                        <Text style={{ color: '#666666' }}>提现金额：</Text>
                        <TextInput
                            style={{ fontSize: 12, height: 25, padding: 0, lineHeight: 25, color: '#666666', textAlign: 'left', width: width - 100 }}
                            value={rmb}
                            keyboardType='numeric'
                            placeholder={"请输入提现金额"}
                            clearButtonMode="always"
                            onChangeText={(rmb) => this._onrmbChangeText(rmb)}
                        />
                    </View>
                    <View style={Styles.item}>
                        <Text style={{ color: '#666666' }}>提现密码：</Text>
                        <TextInput
                            style={{ fontSize: 12, height: 25, padding: 0, lineHeight: 25, color: '#666666', textAlign: 'left', width: width - 100 }}
                            value={pass}
                            keyboardType="number-pad"
                            placeholder={"请输入提现密码"}
                            password = {true}
                            multiline={false}
                            clearButtonMode="always"
                            onChangeText={(pass) => this._onpassChangeText(pass)}
                        />
                    </View>
                    <TouchableOpacity onPress={() => this.do_send()}>
                        <View style={Styles.login_btn}>
                            <Text style={{ color: '#ffffff', fontSize: 16 }}>确认</Text>
                        </View>
                    </TouchableOpacity>

                </View>
                {this._show_banklist_model()}
                {this.toast()}

            </View>
        )
    }



}
